<template>
    <div class="page" :style="{ height: height }">
		<swiper
			class="swiper"
			:vertical="true"
			@change="changeCurrent"
			@animationfinish="animationFinish"
			:current="index">
			<swiper-item class="swiper-item" v-for="(item,i) in videoList" :key="i" @click="videoPlayOrPause(i)">
				<video :id="'video'+i" :ref="'video'+i" :src="item.video" @play="videoIsPlay(i)" @pause="videoIsPause(i)" loop class="video"></video>
			</swiper-item>
		</swiper>
    </div>
</template>
<script>
    export default { 
		components:{
		},
        data() {
            return {
				videoList:[
						{
							video: "http://qqqqshop.ahqqqq.com/video1001.mp4",
							poster: "http://qqqqshop.ahqqqq.com/video1001.png",
							content_raw: "我等这马夹很久了",
							flag:false,
						},
						{
							video: "http://qqqqshop.ahqqqq.com/video1002.mp4",
							poster: "http://qqqqshop.ahqqqq.com/video1002.png",
							content_raw: "我等这马夹很久了",
							flag:false,
						},
						{
							video: "http://qqqqshop.ahqqqq.com/video1003.mp4",
							poster: "http://qqqqshop.ahqqqq.com/video1003.png",
							content_raw: "我等这马夹很久了",
							flag:false,
						},
						{
							video: "http://qqqqshop.ahqqqq.com/video1004.mp4",
							poster: "http://qqqqshop.ahqqqq.com/video1004.png",
							content_raw: "我等这马夹很久了",
							flag:false,
						},
						{
							video: "http://qqqqshop.ahqqqq.com/video1005.mp4",
							poster: "http://qqqqshop.ahqqqq.com/video1005.png",
							text: "我等这马夹很久了",
							flag:false,
						},
						{
							video: "http://qqqqshop.ahqqqq.com/video1006.mp4",
							poster: "http://qqqqshop.ahqqqq.com/video1006.png",
							text: "我等这马夹很久了",
							flag:false,
						},
				],
				height:'667px',
				index:0,
				width:'',
				oldIndex:0,
			}
        },
		created(){
			//#ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
			//隐藏subnvue
			uni.getSubNVueById('comment').hide()
			uni.getSubNVueById('input-box').hide()
			//#endif
			this.sysheight = uni.getSystemInfoSync().windowHeight
			this.height = `${this.sysheight}px` 
			let width = uni.getSystemInfoSync().windowWidth 
			this.width = `${width}px` 
		},
		mounted() {
			this.videoContext = uni.createVideoContext('video0')
			this.videoContext.play()
		},
		onHide(){
			
		},
		onLoad(e) {
			  this.index=e.index||0
		},
        methods: {
			animationFinish(e){
				//#ifdef APP-PLUS
				this.changeCurrent(e)
				//#endif
			},
			changeCurrent(e){
				this.videoContext.seek(0)
				this.videoContext.pause()
				this.videoContext = uni.createVideoContext('video'+e.detail.current)
				this.videoContext.seek(0)
				this.videoContext.play()
			},
			videoPlayOrPause(index){
				this.videoContext = uni.createVideoContext('video'+index)
				console.log(this.videoContext)
				console.log(this.videoList[index].flag)
				if(this.videoList[index].flag){
					this.videoContext.pause()
				}else{
					this.videoContext.play()
				}
			},
			videoIsPlay(index){
				this.videoList[index].flag=true
			},
			videoIsPause(index){
				this.videoList[index].flag=false
			}
			
        },
		watch:{
			
		}
    }
</script>
<style scoped>
	.swiper{
		flex: 1;  
		background-color: #000;
		height: 100%;
	}
	.swiper-item {
	    flex: 1;
	}
    .video {
		flex: 1;
		height: 100%;
    }
		
</style>